<template>
  <div 
    class="side-panel" 
    :class="{ mobile: isMobile, show: isMobile && showSidePanel }"
  >
    <!-- 移动端头部 -->
    <div v-if="isMobile" class="panel-header">
      <div class="panel-title">{{ getPanelTitle(activeTab) }}</div>
      <button class="close-btn" @click="$emit('close-panel')">×</button>
    </div>
    
    <div v-if="!isMobile" class="panel-tabs">
      <div 
        class="panel-tab" 
        :class="{active: activeTab === 'members'}"
        @click="$emit('tab-change', 'members')"
      >
        成员({{ members.length }})
      </div>
      <div 
        class="panel-tab" 
        :class="{active: activeTab === 'chat'}"
        @click="$emit('tab-change', 'chat')"
      >
        聊天
      </div>
      <div 
        class="panel-tab" 
        :class="{active: activeTab === 'share'}"
        @click="$emit('tab-change', 'share')"
      >
        共享
      </div>
    </div>
    
    <div class="panel-content">
      <MemberList 
        v-if="activeTab === 'members'"
        :members="members"
        :current-user="currentUser"
      />
      
      <ChatArea 
        v-if="activeTab === 'chat'"
        :messages="messages"
        @send-message="$emit('send-message', $event)"
      />
      
      <ShareArea v-if="activeTab === 'share'" />
    </div>
  </div>
</template>

<script>
import MemberList from './sub-components/MemberList.vue'
import ChatArea from './sub-components/ChatArea.vue'
import ShareArea from './sub-components/ShareArea.vue'

export default {
  name: 'SidePanel',
  components: {
    MemberList,
    ChatArea,
    ShareArea
  },
  props: {
    activeTab: {
      type: String,
      required: true
    },
    members: {
      type: Array,
      required: true
    },
    messages: {
      type: Array,
      required: true
    },
    currentUser: {
      type: Object,
      required: true
    },
    isMobile: {
      type: Boolean,
      default: false
    },
    showSidePanel: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    getPanelTitle(tab) {
      const titles = {
        'members': `成员(${this.members.length})`,
        'chat': '聊天',
        'share': '共享屏幕'
      };
      return titles[tab] || '面板';
    }
  }
}
</script>

<style scoped>
@import '../styles/side-panel.css';
</style>